<template>
  <div v-show="visibility" class="pop-container">
    <div class="pop-bg"></div>
    <div class="pop-content">
      <div class="pop-content-title">
        首开三期三标段
        <div class="close" @click="onClose">
          <img src="@/assets/images/dust/close.png" alt="" />
        </div>
      </div>

      <div class="content">
        <div class="group">
          <div class="group-title">
            <div class="group-title-tab">
              <span class="on">基本情况</span>
            </div>
          </div>
          <div class="group-info flex flex-wrap">
            <div
              class="group-info-item"
              v-for="(item, index) in infoList"
              :key="index"
            >
              <div class="title">{{ item.title }}：</div>
              <div class="num">{{ item.value }}</div>
            </div>
          </div>
        </div>

        <div class="group">
          <div class="group-title">
            <div class="group-title-tab" @click="chartChange">
              <span :class="isCharts ? 'on' : ''">指标趋势</span>
              <span :class="isCharts ? '' : 'on'">监控预警</span>
            </div>
            <div v-show="isCharts" class="group-title-date">
              <div
                class="title2 pointer"
                :class="dateActive == item.value ? 'active' : ''"
                @click="dateChange(item.value)"
                v-for="(item, index) in dateList"
                :key="index"
              >
                {{ item.title }}
              </div>
            </div>
          </div>
          <div class="group-info">
            <div
              v-show="isCharts"
              class="echarts"
              id="echartsInfo"
              ref="echartsInfo"
            ></div>
            <div class="" v-show="!isCharts">
              <div
                class="maxnums-item"
                v-for="(item, index) in maxnums"
                :key="index"
              >
                <span class="square square1"></span>
                <span class="square square2"></span>
                <span class="square square3"></span>
                <span class="square square4"></span>
                {{ item.value }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Highcharts from "highcharts";
import highcharts3d from "highcharts/highcharts-3d";
import { getRunState } from "@/api";
highcharts3d(Highcharts);

export default {
  name: "popup",
  props: {
    visibility: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      infoList: [
        { title: "温度", value: "28℃" },
        { title: "二氧化硫", value: "28℃" },
        { title: "可吸入颗粒物", value: "28℃" },
        { title: "湿度", value: "28℃" },
        { title: "一氧化碳", value: "28℃" },
        { title: "噪音", value: "28℃" },
      ],

      tabActive: 1, // 1, 2
      dateActive: 24, // 24, 7
      dateList: [
        { title: "近24小时", value: 24 },
        { title: "近一周", value: 7 },
      ],

      // 曲线图数据
      data: [
        {
          name: "东京",
          marker: {
            // symbol: 'square'
          },
          data: [
            7.0,
            6.9,
            9.5,
            14.5,
            18.2,
            21.5,
            25.2,
            {
              // y: 26.5,
              // marker: {
              // symbol: 'url(https://code.hcharts.cn/graphics/sun.png)'
              // }
            },
            23.3,
            18.3,
            13.9,
            9.6,
          ],
        },
        {
          name: "伦敦",
          marker: {
            // symbol: 'diamond'
          },
          data: [
            {
              // y: 3.9,
              // marker: {
              //     symbol: 'url(https://code.hcharts.cn/graphics/snow.png)'
              // }
            },
            4.2,
            5.7,
            8.5,
            11.9,
            15.2,
            17.0,
            16.6,
            14.2,
            10.3,
            6.6,
            4.8,
          ],
        },
      ],

      // 监测预警
      maxnums: [
        { title: "测试数据", value: "testtst" },
        { title: "测试数据", value: "testtst" },
        { title: "测试数据", value: "testtst" },
        { title: "测试数据", value: "testtst" },
        { title: "测试数据", value: "testtst" },
        { title: "测试数据", value: "testtst" },
        { title: "测试数据", value: "testtst" },
      ],
    };
  },
  computed: {
    isCharts() {
      return this.tabActive == 1;
    },
  },
  mounted() {
    this.getList();
    // todo 修改到getList 中
    this.initChat();
  },
  methods: {
    getList() {
      getRunState({
        active: this.active,
        sort: this.sortActive,
      })
        .then((res) => {
          if (res.data.code == 200) {
            let data = [
              {
                name: "在线",
                y: Number(res.data.data.onLine),
              },
              {
                name: "离线",
                y: Number(res.data.data.notOnLine),
              },
            ];
            let data1 = [
              {
                name: "预警",
                y: Number(res.data.data.earlyWarningNum),
              },
              {
                name: "报警",
                y: Number(res.data.data.policeNum),
              },
            ];
            this.maxnums[0].maxnums = res.data.data.pm25;
            this.maxnums[1].maxnums = res.data.data.pm10;
            this.maxnums[2].maxnums = res.data.data.noise;
            this.$nextTick(() => {
              this.echarts2(data);
              this.echarts3(data1);
            });
          }
        })
        .catch((err) => {
        });
    },

    chartChange() {
      this.tabActive = this.tabActive == 1 ? 2 : 1;
    },
    dateChange(value) {
      this.dateActive = value;
      this.getList();
    },

    initChat() {
      const option = {
        chart: {
          type: "spline",
          backgroundColor: "rgba(39,48,68,0.35)",
        },
        title: {
          text: "",
        },
        subtitle: {
          text: "",
        },
        legend: {
          // bubbleLegend: {
          //         color: '#ffffff'
          // }
        },
        xAxis: {
          labels: {
            style: {
              color: "#ffffff",
            },
          },
          // categories: ['一月', '二月', '三月', '四月', '五月', '六月',
          //     '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
          title: {
            text: "",
          },
          labels: {
            // formatter: function () {
            // return this.value + '°';
            // }
            style: {
              color: "#ffffff",
            },
          },
        },
        tooltip: {
          crosshairs: true,
          shared: true,
        },
        plotOptions: {
          spline: {
            marker: {
              radius: 4,
              lineColor: "#666666",
              lineWidth: 1,
            },
          },
        },
        series: this.data,
      };
      var echartsInfo = Highcharts.chart("echartsInfo", option);
    },

    onClose() {
      this.$emit("close");
      this.visibility = false;
    },
  },
};
</script>

<style lang="less" scoped>
.pop-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pop-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1050;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}
.pop-content {
  z-index: 1052;
  width: 50%;
  height: 70%;
  overflow-y: auto;
  background: url("../../../assets/images/dust/bg-6.png") no-repeat;
  background-size: 100% 100%;
  /*opacity: .6;*/

  .pop-content-title {
    padding: 22px;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    position: relative;
    .close {
      position: absolute;
      right: 25px;
      top: 25px;
      img {
        width: 26px;
      }
    }
  }

  .content {
    width: 100%;
    padding: 0 23px 23px;

    .group {
      border: 1px solid #219eff;
      border-radius: 10px;
      background: rgba(33, 158, 255, 0.3);
      padding: 20px 30px;
      &:not(:first-child) {
        margin-top: 20px;
      }
      .group-title {
        font-size: 16px;
        font-weight: 500;
        color: #ffffff;
        padding-bottom: 20px;
        border-bottom: 1px solid #b9e0ff;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        .group-title-tab {
          position: absolute;
          bottom: -2px;
          span {
            padding-bottom: 20px;
            margin-right: 28px;
            display: inline-block;
            color: #75aada;
            /*width: 28px;*/
            /*height: 4px;*/
            &.on {
              color: #fff;
              border-bottom: 4px solid #17a7eb;
            }
          }
        }
        .group-title-date {
          position: absolute;
          right: 2px;
          bottom: 20px;
          display: flex;
          .title2 {
            // height: 20px;
            background: rgba(31, 73, 135, 0.3);
            border: 1px solid rgba(35, 103, 255, 0.6);
            border-radius: 10px;
            font-size: 12px;
            color: #ffffff;
            text-align: center;
            // line-height: 18px;
            margin-left: 5px;
            padding: 2px 10px;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .title2.active {
            border-color: #3cffff;
          }
        }
      }
      .group-info {
        .group-info-item {
          width: 33%;
          margin-top: 20px;
          display: flex;
          justify-content: start;
          align-items: center;
          .title {
            font-size: 14px;
            font-weight: 400;
            color: #ffffff;
          }
          .num {
            font-size: 14px;
            font-weight: 400;
            color: #9ed5ff;
          }
        }

        .maxnums-item {
          width: 100%;
          background: rgba(118, 147, 211, 0.15);
          padding: 10px 30px;
          position: relative;
          margin-top: 13px;
          color: #fff;
          word-break: break-all;
          .square {
            position: absolute;
            width: 6px;
            height: 6px;
            background: rgba(35, 104, 255, 0.25);
          }

          .square1 {
            top: -3px;
            left: -3px;
          }

          .square2 {
            top: -3px;
            right: -3px;
          }

          .square3 {
            bottom: -3px;
            left: -3px;
          }

          .square4 {
            bottom: -3px;
            right: -3px;
          }
        }
      }
    }
  }
}
</style>